<template>
    <div>
    <h1>这是App组件</h1>
<!--        <mt-button icon="more" type="primary" @click="show">primary</mt-button>-->
       <mybtn type="primary">按需导入的组件</mybtn>
        <button type="button" class="mui-btn mui-btn-block mui-btn-primary">确认</button>
        <ul class="mui-table-view">
            <li class="mui-table-view-cell mui-collapse">
                <a class="mui-navigate-right" href="#">面板1</a>
                <div class="mui-collapse-content">
                    <p>面板1子内容</p>
                    <p>面板2子内容</p>
                    <p>面板3子内容</p>
                    <p>面板4子内容</p>
                    <p>面板5子内容</p>
                </div>
            </li>
        </ul>
        <router-link to="/login">登陆</router-link>
        <router-link to="/reg">注册</router-link>
        <transition>
            <router-view></router-view>
        </transition>
</div>
</template>
<script>
    import {Toast} from 'mint-ui';
    export  default {
        data(){
            return{
                showToast:null
            }
        },
        methods:{
            show(){
                this.showToast=Toast({
                    message: '数据开始加载...',
                    position: 'middle',
                    duration: -1,
                    iconClass:'glyphicon glyphicon-ok',
                    className:"mytoast"
                });
            },
            getlist(){
                this.show();
                setTimeout(()=>{this.showToast.close()},3000)
            }
        },
        created() {
            this.getlist();
        }
    }
</script>
<style scoped>
    .v-enter,.v-leave-to{
        opacity: 0;
        transform: translateY(20px);
    }
    .v-enter-active,.v-leave-active{
        transition: all 1s;
    }
    .v-leave-active{
        position: absolute;
    }
</style>